<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="lib/reset.css">
  <link rel="stylesheet" href="lib/all.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
</head>
<body>

<div id="app">
  <van-nav-bar title="一键拉群" left-arrow></van-nav-bar>
  <div class="pd">
    <van-notice-bar
        wrapable
        color="#333"
        background="#ecf9ff"
        :scrollable="false"
    >
      筛选客户后可一键给选择的客户拉群，因企业微信限制，仅可拉取“未流失” 的客户，一个群内最多邀请39个客户
    </van-notice-bar>

    <div class="mt title">一键拉群 </div>
    <van-cell-group class="mt">
      <van-cell title="企业标签:" is-link @click="show = true">{{company}}</van-cell>
      <van-cell title="开始时间:" is-link @click="showTimeStart = true">{{startDate}}</van-cell>
      <van-cell title="结束时间:" is-link @click="showTimeEnd = true">{{endDate}}</van-cell>
      <van-cell title="添加渠道:" is-link @click="showBy = true">{{selectBy.text}}</van-cell>
      <van-cell title="客户性别:" is-link @click="showSex = true">{{selectSex.text}}</van-cell>
    </van-cell-group>

    <div class="mt">
      <van-notice-bar color="#333" background="#ecf9ff" left-icon="info-o">
        我的全部客户数量 : 3
      </van-notice-bar>
    </div>

    <div class="mt">
      <van-button size="small" type="info" block>提交</van-button>
    </div>
    <div class="mt">
      <van-button size="small" block>重置</van-button>
    </div>


  </div>





  <van-popup v-model="show">
    <div class="pd popup">
      <div class="title">请选择企业标签</div>
      <div class="mt">
        <van-tag @click="setCompany(item)" class="tag" v-for="(item,index) in 10" type="primary">标签 {{index}}</van-tag>
      </div>
    </div>
  </van-popup>

  <van-popup v-model="showTimeStart" position="bottom">
    <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @confirm="onConfirmStart"
    />
  </van-popup>
  <van-popup v-model="showTimeEnd" position="bottom">
    <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @confirm="onConfirmEnd"
    />
  </van-popup>
  <van-popup v-model="showBy" position="bottom">
    <van-picker
        title="请选择添加渠道"
        show-toolbar
        :columns="byList"
        @confirm="onConfirmBy"
    />
  </van-popup>
  <van-popup v-model="showSex" position="bottom">
    <van-picker
        title="请选择性别"
        show-toolbar
        :columns="sexList"
        @confirm="onConfirmSex"
    />
  </van-popup>
</div>

<script src="lib/vue.js"></script>
<script src="lib/moment.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            show:false,
            showTimeStart:false,
            showTimeEnd:false,
            showBy:false,
            showSex:false,
            startDate:'',
            endDate:'',
            company:'请选择',
            byList:[
                { text: '专属名片',id:0 },
                { text: '其他渠道',id:1 }
            ],
            sexList:[
                { text: '男',id:0 },
                { text: '女',id:1 }
            ],
            selectBy:{ text: '请选择',id:1 },
            selectSex:{ text: '请选择',id:1 },
            minDate: new Date(),
        },
        methods:{
            setCompany:function(item){
                this.company = item;
                this.show = false;
            },
            onConfirmStart:function (value, index) {
                this.startDate = moment(value).format('YYYY-MM-DD');
                this.showTimeStart = false;
            },
            onConfirmEnd:function (value, index) {
                this.endDate = moment(value).format('YYYY-MM-DD');
                this.showTimeEnd = false;
            },
            onConfirmBy:function (value, index) {
                this.selectBy = value;
                this.showBy = false;
            },
            onConfirmSex:function (value, index) {
                this.selectSex = value
                this.showSex = false;
            },
        }
    });

</script>
</body>
</html>
